

<template>
  <div class="tags">
    <el-tag
        class="tag"
        v-for="(item,index) in tags"
        :key="item.id"
        :closable="item.name!=='home'"
        :effect="$route.name === item.name ? 'dark' : 'plain'"
        @click="changeTag(item)"
        @close="handlerClose(item,index)">
      {{ item.label }}
    </el-tag>
  </div>

</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name:"CommonTag",
  data(){
    return {}
  },
  methods:{
    changeTag(item){
      this.$router.push({
        path: item.path
      })
    },
    handlerClose(item,index){
      const length = this.tags.length - 1
      //删除
      this.closeTag(item)
      //删除后跳转
      if(item.name !== this.$route.name){
        return
      }
      //删除最后一项
      if(index === length){
        this.$router.push({
          name: this.tags[index - 1].name
        })
      }else{
        this.$router.push({
          name: this.tags[index].name
        })
      }
    },
    ...mapMutations(['closeTag'])       //调用store中的mutations
  },
  computed: {
  ...mapState({
      tags: state => state.tab.tabsList})
  }
}
</script>

<style lang="less" scoped>
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 15px;
  margin-top: 5px;
  .tag{
    margin: 5px; /* 增加标签之间的间距 */
    width: auto; /* 标签的宽度自适应文本长度 */
  }
}

//.tags > * {
//  margin: 10px; /* 设置子元素的边距 */
//}

</style>